<template>
    <view class="comm-list-container task-container">
        <page-header title="我的任务"></page-header>
        <!-- 任务类型切换 -->
        <view class="task-tabs">
            <view
                class="tab-item"
                :class="{ active: currentTab === 'all' }"
                @click="switchTab('all')">
                全部
            </view>
            <view class="tab-item" :class="{ active: currentTab === '0' }" @click="switchTab('0')">
                未完成
            </view>
            <view class="tab-item" :class="{ active: currentTab === '1' }" @click="switchTab('1')">
                部分完成
            </view>
            <view class="tab-item" :class="{ active: currentTab === '2' }" @click="switchTab('2')">
                已完成
            </view>
        </view>

        <!-- 任务列表 -->
        <view class="comm-record-list">
            <record-item
                v-for="(task, index) in taskList"
                :key="index"
                :allCanEdit="true"
                :item="task"
                @clickItem="viewDetail(task)"
                :showActions="false">
                <template #header>
                    <!-- <view class="item-header">
                        <text class="task-type">{{ task.agriculturalWork }}</text>
                        <view class="task-status" :class="getStatusClass(task.status)">
                            <text>{{ getStatusText(task.status) }}</text>
                        </view>
                    </view> -->
                    <view class="item-header">
                        <view style="display: flex; align-items: center">
                            <image
                                style="margin-right: 10rpx"
                                class="icon-wrapper"
                                :src="AGRICULTURAL_WORK_TYPES_CHART[task?.workTask]"
                                mode="aspectFill"></image>
                            <text class="date-title">{{ getWorkTypeLabel(task.workTask) }}</text>
                        </view>

                        <view class="task-status" :class="getStatusClass(task.status)">
                            {{ getStatusLabel(task.status) }}
                        </view>
                    </view>
                </template>

                <template #content>
                    <view class="item-content">
                        <view class="info-row">
                            <text class="info-label">时间</text>
                            <text class="info-value">
                                {{ task.startDate }} - {{ task.endDate }}
                            </text>
                        </view>

                        <view class="info-row">
                            <text class="info-value">{{ task.fieldName }}</text>
                        </view>
                        <view class="info-row" v-if="task.remarks">
                            <text class="info-value">{{ task.remarks }}</text>
                        </view>
                        <!-- 0/1/2 未完成/部分完成/已经完成 -->
                        <view class="task-actions" v-if="task.status !== '2'">
                            <view class="complete-btn" @click.stop="completeTask(task)">
                                任务完成
                            </view>
                        </view>
                    </view>
                </template>
            </record-item>
        </view>

        <!-- 无数据提示 -->
        <empty-data v-if="taskList.length === 0" />
    </view>
</template>

<script>
import PageHeader from '@/components/PageHeader/index.vue'
import RecordItem from '@/components/RecordItem/index.vue'
import EmptyData from '@/components/EmptyData/index.vue'
import { task } from '@/utils/api/index.js'
import {
    AGRICULTURAL_WORK_TYPES,
    STATUS_DICT,
    getDictText,
    AGRICULTURAL_WORK_TYPES_CHART,
} from '@/utils/dict.js'

export default {
    components: {
        PageHeader,
        RecordItem,
        EmptyData,
    },
    data() {
        return {
            currentTab: 'all',
            taskList: [],
            queryParams: {
                pageNo: 1,
                pageSize: 99,
                status: undefined, // 添加状态筛选参数
            },
            total: 0,
            AGRICULTURAL_WORK_TYPES_CHART,
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 切换标签
        switchTab(tab) {
            this.currentTab = tab
            this.queryParams.pageNo = 1
            // 更新查询参数中的状态
            this.queryParams.status = tab === 'all' ? undefined : tab
            this.getList()
        },
        // 获取任务列表
        async getList() {
            try {
                const res = await task.getTaskList(this.queryParams)
                if (res.code === 0) {
                    this.taskList = res.data.list
                    this.total = res.data.total
                }
            } catch (error) {
                console.error('获取任务列表失败:', error)
            }
        },
        getWorkTypeLabel(value) {
            if (!value) return '未知任务'
            return getDictText(AGRICULTURAL_WORK_TYPES, value, value)
        },

        getStatusLabel(status) {
            if (!status) return '未开始'
            return getDictText(STATUS_DICT, status, status)
        },
        // 获取状态样式类
        getStatusClass(status) {
            // 0/1/2 未完成/部分完成/已经完成
            const statusMap = {
                0: 'status-pending',
                1: 'status-in-progress',
                2: 'status-completed',
            }
            return statusMap[status] || 'status-pending'
        },
        // 完成任务
        completeTask(item) {
            // TODO: 调用完成任务接口
            console.log('完成任务', item)
            uni.showModal({
                title: '完成任务',
                content: '确认将任务标记为已完成？',
                success: async (res) => {
                    if (res.confirm) {
                        try {
                            // TODO: 调用完成任务接口
                            let body = {
                                id: item.id,
                                status: 2,
                                // farmingScheduleId: 2,
                            }
                            await task.completeTask(body)
                            await this.getList()
                            uni.showToast({
                                title: '任务已完成',
                                icon: 'success',
                            })
                        } catch (error) {
                            console.error('完成任务失败:', error)
                            uni.showToast({
                                title: '操作失败',
                                icon: 'error',
                            })
                        }
                    }
                },
            })
        },
        // 查看任务详情
        viewDetail(task) {
            console.log('查看任务详情:', task)
        },
    },
}
</script>

<style lang="scss" scoped>
.task-container {
    min-height: 100vh;
    background-color: #f5f5f5;

    .task-tabs {
        display: flex;
        background-color: #fff;
        padding: 20rpx 32rpx;
        margin-bottom: 20rpx;

        .tab-item {
            flex: 1;
            text-align: center;
            font-size: 28rpx;
            color: #666;
            position: relative;
            padding: 20rpx 0;

            &.active {
                color: #0ebd8d;
                font-weight: 500;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 40rpx;
                    height: 4rpx;
                    background-color: #0ebd8d;
                    border-radius: 2rpx;
                }
            }
        }
    }

    .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .task-type {
            font-size: 32rpx;
            font-weight: 500;
            color: #333;
        }

        .task-status {
            text {
                font-size: 28rpx;
                padding: 4rpx 12rpx;
                border-radius: 4rpx;
            }

            &.pending text {
                color: #ff9900;
                background-color: rgba(255, 153, 0, 0.1);
            }

            &.partial text {
                color: #409eff;
                background-color: rgba(64, 158, 255, 0.1);
            }

            &.completed text {
                color: #0ebd8d;
                background-color: rgba(14, 189, 141, 0.1);
            }
        }
    }

    .item-content {
        .info-row {
            display: flex;
            margin-bottom: 24rpx;

            .info-label {
                font-size: 28rpx;
                color: #666;
                margin-right: 20rpx;
                min-width: 120rpx;
            }

            .info-value {
                font-size: 28rpx;
                color: #333;
                flex: 1;
            }
        }

        .task-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 20rpx;

            .complete-btn {
                background-color: #0ebd8d;
                color: #fff;
                font-size: 28rpx;
                padding: 12rpx 24rpx;
                border-radius: 8rpx;
                text-align: center;
            }
        }
    }
}
</style>
